<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>首页</title>
   <!--移动端meta设置 开始-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no">
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- 适应移动端end -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" href="lib/Swiper/css/swiper.css"/>
    <link rel="stylesheet" type="text/css" href="css/all.css">
</head>
<body class="mhome">
<!-- Swiper -->
<section class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="#">
                <img src="image/public-banner1.png" alt="">
            </a>
        </div>
        <div class="swiper-slide">
            <a href="#">
                <img src="image/public-banner1.png" alt="">
            </a>
        </div>
        <div class="swiper-slide">
            <a href="#">
                <img src="image/public-banner1.png" alt="">
            </a>
        </div>
        <div class="swiper-slide">
            <a href="#">
                <img src="image/public-banner1.png" alt="">
            </a>
        </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</section>
<section class="xh-link-list">
    <ul class="flexbox link-list-item">
        <li class="flexbox-1 link-list-info">
            <a href="#">
                <img src="image/index-link-list1.png" alt=""/>
                <span>约战</span>
            </a>
        </li>
        <li class="flexbox-1 link-list-info">
            <a href="#">
                <img src="image/index-link-list2.png" alt=""/>
                <span>赛事资讯</span>
            </a>
        </li>
        <li class="flexbox-1 link-list-info">
            <a href="#">
                <img src="image/index-link-list3.png" alt=""/>
                <span>周边服务</span>
            </a>
        </li>
        <li class="flexbox-1 link-list-info">
            <a href="#">
                <img src="image/index-link-list4.png" alt=""/>
                <span>商务合作</span>
            </a>
        </li>
    </ul>
</section>
<section class="xh-index-new">
    <div id="evtAwardListWrap" class="evt_award_list_wrap">
        <ul id="evtAwardList1" class="index-new-list">
            <!-- 十六条数据-->
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
            <li class="index-list-item">
                <a href="#">
                    <span class="fl">AC米兰VS皇家马德里</span>
                    <span class="fr">2106-07-22</span>
                </a>
            </li>
        </ul>
    </div>
</section>
<section class="xh-index-war">
    <a href="#" class="index-war-pic">
        <img src="image/index-war-pic.png" alt=""/>
    </a>
</section>

<!-- Swiper JS -->
<script src="js/jquery.min.js"></script>
<script src="lib/Swiper/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
    });
    // 滚动
    function autoScroll() {
        var speed = 50;
        var eleWrap = $("#evtAwardListWrap"),
                ele1 = $("#evtAwardList1");
        if (ele1.html() !== "") {
            var html2 = "<ul class='index-new-list'>" + ele1.html() + "</ul>";
            eleWrap.find("ul").eq(0).siblings().remove();
            eleWrap.append(html2);
        }
        var sTop = 0;
        var scrollFun = function () {
            if (eleWrap.scrollTop() < $("#evtAwardList1").height()) {
                sTop++;
                eleWrap.scrollTop(sTop);
            } else {
                eleWrap.scrollTop(0);
                sTop = 0;
            }
        }
        var t = setInterval(scrollFun, speed);
        eleWrap.hover(
                function () {
                    clearInterval(t);
                }, function () {
                    t = setInterval(scrollFun, speed);
                }
        );
    }
    $(function () {
        autoScroll();
    });
</script>
</body>
</html>